<template>
  <div style="position: relative;">
    <div class="swiper-container" v-bind:style="{height:slideWidth +'px'}">
      <div class="swiper-wrapper" style="width: 100%;height: 100%;">
        <div v-for="image in perInfo.images" class="swiper-slide">
          <img :src="image.images" style="width: 100%;height: 100%;">
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>

    <div style="padding: 10px;margin-bottom: 70px;">
      <div style="position: relative;">
        <div style="font-size: 18px;">{{perInfo.nickname}}，{{perInfo.age}}，{{perInfo.city}}</div>
        <div v-if="perInfo.has_house == '1'" style="font-size: 14px;">
          <div v-if="perInfo.carInfo.car_brand && perInfo.carInfo.car_model">
            {{perInfo.carInfo.car_brand}}{{perInfo.carInfo.car_model}}，没买房
          </div>
          <div v-else>
            没有认证车辆，没买房
          </div>
        </div>
        <div v-if="perInfo.has_house == '2'" style="font-size: 14px;">
          <div v-if="perInfo.carInfo.car_brand && perInfo.carInfo.car_model">
            {{perInfo.carInfo.car_brand}}{{perInfo.carInfo.car_model}}，已买房
          </div>
          <div v-else>
            没有认证车辆，已买房
          </div>
        </div>
        <img @click="goTo(0)" src="../assets/tel.png"
             style="width: 36px;height: 36px;position: absolute;top: 5px;right: 10px;">
      </div>

      <div style="font-size: 14px;margin-top: 20px;">
        <div style="font-size: 18px;"> 自我介绍和要求</div>
        <div>{{perInfo.desc}}</div>
      </div>


      <div style="font-size: 14px;margin-top: 20px;">
        <div style="font-size: 18px;">基本资料</div>
        <div style="font-size: 14px;">学历：{{perInfo.university}}，{{perInfo.education | university}}</div>
        <div style="font-size: 14px;">工作：{{perInfo.company}}，{{perInfo.position}}</div>
        <div style="font-size: 14px;">月薪：{{perInfo.salary | formatSalary}}</div>
      </div>

      <div style="font-size: 14px;margin-top: 20px;">
        <div style="font-size: 18px;">其他</div>
        <div style="font-size: 14px;">约会目的：{{perInfo.dating_purposes | formateDate}}</div>
        <div style="font-size: 14px;">约会开支：{{perInfo.who_pay | formatePay}}</div>
        <div style="font-size: 14px;">每个月的恋爱花费：{{perInfo.love_funds | formateFunds}}/月</div>
      </div>
    </div>

    <div style="position: fixed;width: 100%;height: 60px;background-color: #666666;bottom: 0;opacity: 0.6;"></div>
    <div
      style="position:fixed;bottom:15px;z-index:100;display: flex;justify-content: center;align-items: center;width: 270px;left: 50%;margin-left: -135px;">
      <div @click="goTo(1)"
           style="background-color: #24C627;color: #ffffff;height: 30px;opacity: 1;text-align: center;line-height: 30px;font-size: 14px;border-radius: 5px;width: 80px;margin-right: 10px;">
        表示好感
      </div>
      <div @click="goTo(2)"
           style="background-color: red;color: #ffffff;height: 30px;width: 180px;opacity: 1;text-align: center;line-height: 30px;font-size: 14px;border-radius: 5px;z-index:100;">
        我也要征婚/交友
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import Swiper from 'swiper'
  import 'swiper/dist/css/swiper.min.css'
  import qs from 'qs'

  export default {
    name: 'HelloWorld',
    data() {
      return {
        perInfo: {},
        slideWidth: 0
      }
    },
    created: function () {

      this.slideWidth = window.screen.width;
      console.log(this.slideWidth);
    },
    mounted: function () {

      let that = this
      console.log('window.screen.width ', window.screen.width)
      //http://www.autochat.cc/uid/3191
      axios.post('http://www.autochat.cc/uid/' + that.$route.params.uid, {}, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(function (response) {
        if (response.data.errno === 0 && response.data.data) {
          that.perInfo = response.data.data
          console.log('response.data.data ', response.data)
          that.$nextTick(function () {
            that.swiperInit()
          })
          that.headInit(that.perInfo)
        } else {
          that.$router.push({name: 'notFound'})
        }
      }).catch(function (error) {
        that.$router.push({name: 'notFound'})
        // 发生错误
        console.log(error)
      });
    },
    methods: {
      goTo: function (type) {
        this.openApp("aliao://?type=" + type + '&uid=' + this.$route.params.uid, function (data) {
          console.log(data)
          //打不开
          if (!data) {
            window.location.href = "http://android.myapp.com/myapp/detail.htm?apkName=cn.aliao.autochat"
          }
        })
        //window.location.href = "http://android.myapp.com/myapp/detail.htm?apkName=cn.aliao.autochat";
        //window.open("//www.jb51.net");
      },
      swiperInit: function () {
        new Swiper('.swiper-container', {
          autoplay: true,//可选选项，自动滑动
          pagination: {
            el: '.swiper-pagination'
          }
        });
      },
      headInit: function (perInfo) {
        //icon
        var link = document.querySelector("link[rel*='icon']") || document.createElement('link')
        link.type = 'image/x-icon'
        link.rel = 'shortcut icon'
        link.href = perInfo.user_avatar
        document.getElementsByTagName('head')[0].appendChild(link)
        //description
        var metaTag = document.createElement('meta')
        let typeText
        if (perInfo.education === 1) {
          typeText = '高中'
        } else if (perInfo.education === 2) {
          typeText = '专科'
        } else if (perInfo.education === 3) {
          typeText = '本科'
        } else if (perInfo.education === 4) {
          typeText = '硕士'
        } else if (perInfo.education === 5) {
          typeText = '博士'
        } else {
          typeText = '其他'
        }
        metaTag.name = 'description'
        metaTag.content = perInfo.position + '，' + typeText
        document.getElementsByTagName('head')[0].appendChild(metaTag)
        //title
        document.title = perInfo.nickname + '正在征婚中，快给ta介绍对象吧！'
      },
      openApp: function (openUrl, callback) {
        console.log('openUrl ', openUrl)

        //检查app是否打开
        function checkOpen(cb) {
          var _clickTime = +(new Date())

          function check(elsTime) {
            if (elsTime > 3000 || document.hidden || document.webkitHidden) {
              cb(1)
            } else {
              cb(0)
            }
          }

          //启动间隔20ms运行的定时器，并检测累计消耗时间是否超过3000ms，超过则结束
          var _count = 0, intHandle;
          intHandle = setInterval(function () {
            _count++
            var elsTime = +(new Date()) - _clickTime;
            if (_count >= 100 || elsTime > 3000) {
              clearInterval(intHandle)
              check(elsTime)
            }
          }, 20)
        }

        //在iframe 中打开APP
        var ifr = document.createElement('iframe')
        ifr.src = openUrl
        ifr.style.display = 'none'

        if (callback) {
          //客户端检测微信直接跳应用宝链接
          var browser = this.BrowserInfo()
          //使用微链接
          var encodeUri = encodeURIComponent(openUrl)

          if (browser.isWeixin) {
            alert('请点击右上角用浏览器打开')
            //window.location.href = 'http://android.myapp.com/myapp/detail.htm?apkName=cn.aliao.autochat&android_schema=' + encodeUri;
          } else {
            checkOpen(function (opened) {
              callback && callback(opened)
            });

          }
        }

        document.body.appendChild(ifr)
        setTimeout(function () {
          document.body.removeChild(ifr)
        }, 2000)

      },
      BrowserInfo: function () {
        var json = {
          userAgent: navigator.userAgent.toLowerCase(),
          isAndroid: Boolean(navigator.userAgent.match(/android/ig)),
          isIphone: Boolean(navigator.userAgent.match(/iphone|ipod/ig)),
          isIpad: Boolean(navigator.userAgent.match(/ipad/ig)),
          isWeixin: Boolean(navigator.userAgent.match(/MicroMessenger/ig)),
        }

        return json;
      }
    }

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    /*margin: 0 10px;*/
  }

  a {
    color: #42b983;
  }

  .swiper-container {
    width: 100%;
    /*height: 330px;*/
  }
</style>
